<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { getInvoiceInfoDetail } from "@/api/invoice/invoice";
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();
import { ElMessage } from "element-plus";

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const detailid = ref<number | string>();
const showAddModal = (id: number) => {
  showModal(`查看`);
  detailid.value = id;
  getdetail(id);
  // nextTick(() => {
  //   formRef.value.clearValidate();
  // });
};
const detail = ref<any>();
const getdetail = (id: number) => {
  getInvoiceInfoDetail({
    id: id
  }).then(res => {
    detail.value = res.data;
    modalOptions.modalValue = true;
  });
};
onBeforeMount(() => {});
defineExpose({ showAddModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="600"
    height="100%"
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <el-form label-width="200px">
        <el-row>
          <el-col :span="19" :offset="1">
            <el-form-item label="申请开票金额">
              <span>{{ detail?.amountOfApply }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="预开金额">
              <span>{{ detail?.amountOfPre }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div>开票信息</div>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="企业名称">
              <span>{{ detail?.merchantsName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="纳税人识别号">
              <span>{{ detail?.enterpriseIdNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="企业注册地址">
              <span>{{ detail?.enterpriseRegistrationAddress }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="单位电话">
              <span>{{ detail?.workTelephone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="发票类型">
              <span>{{ detail?.invoiceTypeDisplay }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="开票类目">
              <span>{{ detail?.categoryOfInvoice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div>邮寄地址</div>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="收货地址">
              <span>{{ detail?.shippingAddress }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="收件人姓名">
              <span>{{ detail?.nameOfRecipient }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="联系电话">
              <span>{{ detail?.contactNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="电子邮箱">
              <span>{{ detail?.email }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <div>其他信息</div>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="开票状态">
              <span>{{ detail?.invoiceOrderStateDisplay }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="1">
            <el-form-item label="查看发票">
              <el-image
                style="width: 100px"
                :preview-src-list="`[${detail?.invoiceUrl}]`"
                :src="detail?.invoiceUrl"
                fit="contain"
              />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </template>
  </vxe-modal>
</template>

<style>
.form_header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.left-title {
  font-weight: 700;
  font-family: 微软雅黑;
  font-size: 14px;
  width: 85px;
  text-align: right;
}
.right-text {
  font-size: 14px;
}
</style>
